<?php

?>
<script type="text/javascript">
    window.onbeforeunload = function() {
        return "";
    };
    $(document).ready(function(){
        var userSer ='';
        userSer = $('#userSer').val();
        $('#id_chat_div').on( "click",'div', function() {
            $('#fillContentChat').html('');
            var user = $(this).attr('id');
            $('#userClient').val(user);
            $('#error_chat').hide();
            $('#client_id').text('CHAT TO '+user);
            $.getMessage(1);
            $('#fillContentChat').scrollTop($("#fillContentChat")[0].scrollHeight);
        });
        $('#bt_test').click(function(){
            $('#div_limit').toggle();
        });
        $('#fillContentChat').on( "click",'p', function() {
            var client ='tb_' + $('#userClient').val();
            var limit = $("#"+client).val();
            $("#"+client).val(parseInt(limit) +5);
            $.getMessage(1);
        });

        $('#text_content').keyup(function(e)
            { 
                var content = $("#text_content").val();
                var userClent = $('#userClient').val();
                if(e.keyCode == 13 && content!='' && userClent!='')
                {
                    $.post('~chat/insertChat',{userSer:userSer,userClent:userClent,content : content} , function(data){
                        $.sendMessage(userSer,content,data);
                        /* $("#text_content").val('');
                        $('#fillContentChat').append(
                        '<span style="color :blue;font-size: 13px;margin-left :5px;">'+userSer+'</span><br><div style="margin-left :5px;"><span style="font-size: 13px;">'+content+'<p style="float:right; margin-right:10px;color: gray;">'+data+'</p></span></div><br><br>');
                        if(scrollTop == scrollHeight - divDisplay)
                        {
                        $('#fillContentChat').scrollTop($("#fillContentChat")[0].scrollHeight);
                        }
                        var client ='tb_' + $('#userClient').val();
                        var limit = $("#"+client).val();
                        $("#"+client).val(parseInt(limit) +1);*/
                    });
                }
                else
                {
                    if(userClent == '')
                        $('#error_chat').show();
                }
        });
        setInterval(function(){
            $.getMessage(0);
            $.getUserOnline();
            },1000);

    });
    /*
    function getUserOnline()
    {
    $.post('~chat/getUser',{},function(data){
    $('#id_chat_div').html(data);
    });
    }
    function getMessage(param)
    {
    var scrollTop = $('#fillContentChat').scrollTop();
    var scrollHeight = $("#fillContentChat")[0].scrollHeight;
    var divDisplay = $('#fillContentChat').width();
    var client ='tb_' + $('#userClient').val();
    var limit = $("#"+client).val();
    var userSer ='';
    userSer = $('#userSer').val();
    var userClent ='';
    userClent = $('#userClient').val();
    if(userClent !='' && userSer != '' && userClent != null && userSer != null)
    {
    var scroll = '';
    if(scrollTop == scrollHeight - divDisplay )
    {
    scroll = 'true';
    }
    $.post('~chat/displayMessage',{userclient :userClent,limit : limit, param : param, scroll : scroll},function(data){
    //alert('test :'+data);
    if(data!= '')
    {
    $('#fillContentChat').append(data);
    var client ='tb_' + $('#userClient').val();
    $("#"+client).val(parseInt(limit) +1);
    }
    if(scroll != '')
    {
    $('#fillContentChat').scrollTop($("#fillContentChat")[0].scrollHeight);
    }
    });
    }
    }
    */
    (function( $ ){
        $.getMessage = function(param)// 1->get message limitvalue, 0->getmessage append
        {
            var scrollTop = $('#fillContentChat').scrollTop();
            var scrollHeight = $("#fillContentChat")[0].scrollHeight;
            var divDisplay = $('#fillContentChat').width();
            var client ='tb_' + $('#userClient').val();
            var limit = $("#"+client).val();
            var userSer ='';
            userSer = $('#userSer').val();
            var userClent ='';
            userClent = $('#userClient').val();
            if(userClent !='' && userSer != '' && userClent != null && userSer != null)
            {
                var scroll = '';
                if(scrollTop == scrollHeight - divDisplay )
                {
                    scroll = 'true';
                }
                $.post('~chat/displayMessage',{userclient :userClent,limit : limit, param : param, scroll : scroll},function(data){
                    //alert('test :'+data);
                    if(data!= '')
                    {
                        $('#fillContentChat').append(data);
                        var client ='tb_' + $('#userClient').val();
                        $("#"+client).val(parseInt(limit) +1);
                    }
                    if(scroll != '')
                    {
                        $('#fillContentChat').scrollTop($("#fillContentChat")[0].scrollHeight);
                    }
                });
            }
        }; 
        $.getUserOnline = function()
        {
            $.post('~chat/getUser',{},function(data){
                $('#id_chat_div').html(data);
            });
        };
        $.sendMessage = function(userSelf,content,time) // userLogin, content, time(h,i)
        {
            var scrollTop = $('#fillContentChat').scrollTop();
            var scrollHeight = $("#fillContentChat")[0].scrollHeight;
            var divDisplay = $('#fillContentChat').width();
            $("#text_content").val('');
            $('#fillContentChat').append(
                '<span style="color :blue;font-size: 13px;margin-left :5px;">'+userSelf+'</span><div style="margin-left :5px;"><span style="font-size: 13px;"><p style="float:right; margin-right:10px;color: gray;">'+content+time+'</p></span></div>');
            if(scrollTop == scrollHeight - divDisplay)
            {
                $('#fillContentChat').scrollTop($("#fillContentChat")[0].scrollHeight);
            }
            var client ='tb_' + $('#userClient').val();
            var limit = $("#"+client).val();
            $("#"+client).val(parseInt(limit) +1);
        };
    })( jQuery );
</script>
<h1>Welcome Chat Room</h1>
<?php
    if(isset($_SESSION['username']))
    {
    ?>
    <input hidden="" id="userSer" value="<?php echo $_SESSION['username'] ; ?>"></input>
    <input hidden=""  id="userClient" value=""></input>
    <!--<input   id="limitValue" value="10"></input> -->
    <button  id="bt_test">Test</button>
    <div style="margin-left: 10px; float: left; width: 400px;">
        <span id="client_id" style="color: red; font-weight: bold;">CHAT TO ..</span>
        <div id="fillContentChat" style="width:100%; height: 400px; border:1px solid #333;overflow:auto;"></div>
        <textarea id="text_content" style="width:100%;" rows="4"></textarea>
    </div>
    <div id="id_chat_div"  style=" float: right; min-height: 100px; width: 200px; border:1px solid #333; margin-right: 200px;">
        <?php
            $aUser = $template->get('aUser'); 
            if(count($aUser))
            {
                foreach($aUser as $user)
                {
                    $status ='';
                    if($user->online == 1)
                        $status = 'online';
                    else
                        $status = 'offline';
                    echo '<div class="id_chat" id="'.$user->user_id.'" style="height: 50px; width: 100%; background-color: #FFFFCC;border:1px solid #333;">
                    <label style=" padding-left: 10px; float: left; line-height: 50px;font-weight: bold"><img style=" margin-right: 5px;" src="'.URL::getLink("image/$status").'">'.$user->user_id.'</label>
                    </div>' ;
                }
            }
        ?>
        <div style="clear: both;"></div>
    </div>
    <div id="div_limit" style=" float: right; min-height: 100px; width: 100px; border:1px solid #333; ">
        <?php
            $aUser = $template->get('aUser'); 
            if(count($aUser))
            {
                foreach($aUser as $user)
                {
                    echo '<input id="tb_'.$user->user_id.'" value = "10" style ="width:97%"></input>';
                }
            }
        ?>
    </div>
    <div style="clear: both; font-size: 16px;"></div>
    <h3 id="error_chat" style="color: red;" hidden="true;">Please Chosen Person chat*</h3>
    <?php
    }else
    {
        echo '<h1 style="color:red;">LOGIN TO CHAT</h1>';
    }
?>